<template>
  <div id="app">
      <header :class="header">
        <span><</span>
        <span>新用户福利</span>
        <span></span>
      </header>
      <!--  -->
      <div class="Red_packet_consumption">
          <p>先领红包在消费，优惠多多</p>
          <div class="btn">
              <button>登录领取</button>
          </div>
      </div>
      <!--  -->
      <div class="commodity_list">
          <h2>首单最高立减30</h2>
          <div v-for="(v,i) in content_list" :key="i" class="content_list">
              <figure>
                  <div class="left"><img :src="v.img"></div>
                  <div class="right">
                      <h3>{{v.h3}}</h3>
                      <p class="p">{{v.p}}</p>
                      <div class="fo"><p><span>{{v.sp1}}</span> | <span>{{v.sp2}}</span></p><p><span>{{v.sp3}}</span> | <span>{{v.sp4}}</span></p></div>
                  </div>
              </figure>
              <p class="P_bottom"><span>{{v.sp5}}</span><span>{{v.sp6}}</span></p>
          </div>
      </div>
      <!--  -->
      <div class="kon"></div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name:'app',
  data () {
      return {
          content_list:[
              {
                  "img":"https://fuss10.elemecdn.com/8/b9/de9dbf0f00322b0ea26b27d048a8apng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                  "h3":"金手勺（同泽园店）",
                  "p":"4.6 月售560单",
                  "sp1":"￥20起送",
                  "sp2":"配送费￥8",
                  "sp3":"2.62km",
                  "sp4":"39分钟",
                  "sp5":"首",
                  "sp6":"新用户下单立减17元"
              },
               {
                  "img":"https://fuss10.elemecdn.com/f/8c/a0243ff6b05f952b127524b5bf99ajpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                  "h3":"金手勺（同泽园店）",
                  "p":"4.6 月售560单",
                  "sp1":"￥20起送",
                  "sp2":"配送费￥8",
                  "sp3":"2.62km",
                  "sp4":"39分钟",
                  "sp5":"首",
                  "sp6":"新用户下单立减17元"
              },
               {
                  "img":"https://fuss10.elemecdn.com/6/65/d82fcebb8898d9476d74d2bb2706ajpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                  "h3":"金手勺（同泽园店）",
                  "p":"4.6 月售560单",
                  "sp1":"￥20起送",
                  "sp2":"配送费￥8",
                  "sp3":"2.62km",
                  "sp4":"39分钟",
                  "sp5":"首",
                  "sp6":"新用户下单立减17元"
              },
               {
                  "img":"https://fuss10.elemecdn.com/4/ff/bde8cd29387027b84824a95e0058bjpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                  "h3":"金手勺（同泽园店）",
                  "p":"4.6 月售560单",
                  "sp1":"￥20起送",
                  "sp2":"配送费￥8",
                  "sp3":"2.62km",
                  "sp4":"39分钟",
                  "sp5":"首",
                  "sp6":"新用户下单立减17元"
              },
              {
                  "img":"https://fuss10.elemecdn.com/8/b9/de9dbf0f00322b0ea26b27d048a8apng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                  "h3":"金手勺（同泽园店）",
                  "p":"4.6 月售560单",
                  "sp1":"￥20起送",
                  "sp2":"配送费￥8",
                  "sp3":"2.62km",
                  "sp4":"39分钟",
                  "sp5":"首",
                  "sp6":"新用户下单立减17元"
              },
               {
                  "img":"https://fuss10.elemecdn.com/f/8c/a0243ff6b05f952b127524b5bf99ajpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                  "h3":"金手勺（同泽园店）",
                  "p":"4.6 月售560单",
                  "sp1":"￥20起送",
                  "sp2":"配送费￥8",
                  "sp3":"2.62km",
                  "sp4":"39分钟",
                  "sp5":"首",
                  "sp6":"新用户下单立减17元"
              },
               {
                  "img":"https://fuss10.elemecdn.com/6/65/d82fcebb8898d9476d74d2bb2706ajpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                  "h3":"金手勺（同泽园店）",
                  "p":"4.6 月售560单",
                  "sp1":"￥20起送",
                  "sp2":"配送费￥8",
                  "sp3":"2.62km",
                  "sp4":"39分钟",
                  "sp5":"首",
                  "sp6":"新用户下单立减17元"
              },
               {
                  "img":"https://fuss10.elemecdn.com/4/ff/bde8cd29387027b84824a95e0058bjpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                  "h3":"金手勺（同泽园店）",
                  "p":"4.6 月售560单",
                  "sp1":"￥20起送",
                  "sp2":"配送费￥8",
                  "sp3":"2.62km",
                  "sp4":"39分钟",
                  "sp5":"首",
                  "sp6":"新用户下单立减17元"
              }
          ],
          header:'header_terr'
      }
  },
  mounted() {
   window.addEventListener('scroll', this.menu)
    
  },
    methods:{
      menu() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
          if (scrollTop > 0) {
            this.header = 'header_terr1'
          } else {
            this.header = 'header_terr'
          }
      }
    }
}
</script>

<style scoped lang="less">
.px2rem(@name, @px) {@{name}: @px / 75 * 1rem;}
.header_terr{
  z-index: 99;
  width: 100%;
  .px2rem(height, 100);
  position: fixed;
  left: 0;
  top: 0;
//   background: #00a4ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
//   opacity: 0;
  .px2rem(font-size, 32);
  font-weight: 400;
  span:nth-child(1){
    width: 6%;
    text-align: center;
  }
  span:nth-child(2){
    opacity: 0;
  }
}
.header_terr1{
  z-index: 99;
  width: 100%;
  .px2rem(height, 100);
  position: fixed;
  left: 0;
  top: 0;
  background: #00a4ff;
  transition: 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  .px2rem(font-size, 32);
  font-weight: 400;
  span:nth-child(1){
    width: 6%;
    text-align: center;
  }
}
.Red_packet_consumption{
    width: 100%;
    background: url("https://fuss10.elemecdn.com/0/03/06f830b8473ac0129bd4f24f9fca4png.png");
    background-size: 100% 100%;
    .px2rem(height, 580);
    position: relative;
    p{
        width: 100%;
        .px2rem(height,50);
        .px2rem(line-height, 50);
        text-align: center;
         position: absolute;
        left: 0;
        bottom: 30%;
        color: #ffd59d;
        .px2rem(font-size, 22);
    }
    .btn{
        width: 100%;
        .px2rem(height, 120);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        bottom: 10%;
        button{
            width: 70%;
            height: 80%;
            outline: none;
            border: none;
            background: url(../assets/img/btn_bg.png) repeat-x;
            border-radius: 5px; 
            .px2rem(font-size, 40);
            font-weight: 400;
            color: #7c1004;
        }
    }
}
.commodity_list{
    width: 100%;
    .px2rem(margin-top,60);
    h2{
        width: 100%;
        .px2rem(height, 50);
        .px2rem(line-height, 50);
        text-align: center;
        border-bottom: 1px solid #eeeeee;
        color: #808080;
        .px2rem(font-size, 28);
        background: url(../assets/img/h2_bg.png);
        background-size: 100% 100%; 
    }
    .content_list{
        width: 100%;
        .px2rem(height, 264);
        border-bottom: 1px solid #eeeeee;
        figure{
            width: 100%;
            .px2rem(height, 174);
             display: flex;
            .left{
                .px2rem(width,150);
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    .px2rem(width,130 );
                    .px2rem(height,130);
                }
            }
            .right{
                flex: 1;
                h3{
                    .px2rem(font-size, 32);
                    font-weight: bolder;
                    .px2rem(height, 70);
                    .px2rem(line-height, 70);
                }
                .p{
                    width: 100%;
                    .px2rem(height, 50);
                    .px2rem(line-height, 50);
                     color: #666666;
                    .px2rem(font-size, 20);
                    .px2rem(text-indent,180);
                     background: url(../assets/img/ji.png) no-repeat left center;
                    background-size: 84px 17px;

                }
                .fo{
                    width: 96%;
                    .px2rem(height, 55);
                    .px2rem(line-height, 55);
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px  dashed #cccccc;
                    color: #666666;
                    .px2rem(font-size, 20);
                }
            }
        }
        .P_bottom{
            width: 100%;
            .px2rem(height, 100);
            .px2rem(line-height, 100);
            .px2rem(text-indent, 150);
            span:nth-child(1){
                background: #70bc46;
                border-radius: 2px;
                color: white;
                .px2rem(margin-right, 10);
                .px2rem(font-size, 20);
            }
            span:nth-child(2){
                color: #666666;
                .px2rem(font-size, 20);
            }
        }
    }
}
.kon{
    .px2rem(height, 100);
}
</style>